<template>
  <section class="dustymanagement">
    <el-col :span="24" class="action-bar">
        <div>考勤时间</div>
        <el-col :span="7" :offset="1">
            <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"  v-model="period.startTime" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="1" style="text-align:center">-</el-col>
        <el-col :span="7">
            <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"  v-model="period.endTime" style="width: 100%;"></el-date-picker>
        </el-col>
    </el-col>
    <el-col :span="24" class="action-bar" >
        <el-col :span="2">人员</el-col>
		<el-select
				v-model="executor"
				filterable
				remote
				:loading="loading"
				placeholder="请输入会员名"
				@change="getExecutor"
				:remote-method="searchName"
					>
				<el-option
					v-for="(item,index) in vipList"
					:key="item.vip_id"
					:label="item.realname"
					:value="index">
				</el-option>
			</el-select>
		<el-button size="medium " type="primary" @click="addExecutor" style="margin-left:30px">添加</el-button>
		
    </el-col>
	<el-col :span="24" class="action-bar"  style="height:auto">
		<el-button type="primary" size="medium"  @click="search">筛选</el-button>
        <div  class="executorList">
			<div v-for="(item,index) of executorList" :key="index">
				<span>姓名：{{item.realname}}</span>
				<span>会员等级：{{item.vip_name}}</span>
				<span>电话号码: {{item.phone}}</span>
				<i class="el-icon-remove"  @click.stop="deleteExecutor(index)"></i>
			</div>
		</div>
		
    </el-col>

	<!-- 新增 -->
		<el-dialog :visible.sync="addFormVisible" @close="initData" >
			<el-form  label-width="120px"  ref="addForm">
				<el-form-item label="会员">
					<el-select
					v-model="executor"
					filterable
					remote
					:loading="loading"
					placeholder="请输入会员名"
					@change="getExecutor"
					:remote-method="searchName"
						>
					<el-option
						v-for="item in vipList"
						:key="item.vip_id"
						:label="item.realname"
						:value="item">
					</el-option>
				</el-select>
				<el-button size="medium " type="primary" @click="addExecutor">添加</el-button>
				<div v-for="(item,index) of executorList" :key="index" class="executorList">
					<div>
						<span>姓名：{{item.realname}}</span>
						<span>会员等级：{{item.vip_name}}</span>
						<span>电话号码: {{item.phone}}</span>
						<i class="el-icon-remove"  @click.stop="deleteExecutor(index)"></i>
					</div>
				</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addFormVisible = false">提交</el-button>
			</div>
		</el-dialog>
		<!-- 新增 end -->

    <!--列表-->
    <el-table :data="users" highlight-current-row class="el-table-style">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="60" sortable>
			</el-table-column>
        <el-table-column prop="real_name" label="姓名"  sortable>
        </el-table-column>
        <el-table-column prop="vip_name" label="会员级别"  sortable>
        </el-table-column>
        <el-table-column prop="onDutyTime" label="值班时间"  sortable>
        </el-table-column>
        <el-table-column prop="isGoWorkDaka" label="上班打卡状态"  sortable>
        </el-table-column>
		<el-table-column prop="GoWorkTime" label="上班打卡时间"  sortable>
        </el-table-column>
		<el-table-column prop="isOffWorkDaka" label="下班打卡状态"  sortable>
        </el-table-column>
		<el-table-column prop="offWorkTime" label="下班打卡时间"  sortable>
        </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
        <div class="page-code">
			<el-pagination
				background
				:page-size="16"
				layout="prev, pager, next"
				:total="totalPage"
				@current-change="pageChange"
					>
			</el-pagination>
		</div>
    </el-col>
  </section>
</template>

<script>
// getUserDakaList
export default {
	data(){
		return {
			addFormVisible: false,//新增界面是否显示
			addForm: {
			},
			users:[],
			searchMember:[],//搜索的人员
			period:{//筛选周期
				startTime:'',
				endTime:this.$currency.formatDateTime(new Date()),
			},
			executor:'',//选中的值班人员
			executorList:[],//选中的值班人员数组
			vipList: [],//搜索的值班人员
			loading: false,
			page:1,
			totalPage:0
		}
	},
	computed: {
		executorIdList:function(){
			const list = this.executorList;
			const newList=	list.map(item=>{
				return item.user_id
			})
			return newList
		}
	},

	methods:{
		getExecutor(e){
			this.executor=e;
		},
		addExecutor(){
			//添加执行者
			if(isNaN(this.executor) || this.executor===''){
				return
			}
			const is_join= this.executorList.find(item=>{
				//判断是否已经在筛选的队列里
				return item.user_id==this.vipList[this.executor].user_id
			})
			if(is_join){
				this.executor='';
				return
			}
			this.executorList.push(this.vipList[this.executor]);
			this.executor='';
		},
		deleteExecutor(index){
			//删除执行者
			this.executorList.splice(index,1);
		},
		async searchName(name){
			//搜索用户名
			this.loading=true;
			if(!name){
				this.vipList=[];
				this.loading=false
				return
			}
			const res=await this.$api.getUserVipList ({
				page:0,
				pagesize:16,
				realname:name
			})
			if(res.data.level=='success'){
				this.vipList=res.data.data.user_vip_list
			}
			this.loading=false
    	},
		async getUserDakaList(){
			//获取值班管理列表
			const res=await this.$api.getUserDakaList({
				page:this.page,
				startTime:this.period.startTime,
				endTime:this.period.endTime,
				uids:this.executorIdList
			})
			if(res.data.level=='success'){
				this.totalPage=res.data.data.total
				this.users=res.data.data.user_daka_list
			}
		},
		search(){
			this.page=1;
			this.getUserDakaList()
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getUserDakaList()
		},
		initData(){

		}
	},
    mounted() {
		this.getUserDakaList();
    },
}
</script>
<style lang='scss' scoped>
  .dustymanagement{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.address-detail{
			margin-top:20px;
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}

		.executorList{
			display: flex;
			flex-wrap: wrap;
			div{
				margin:10px;
				border:1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.dustymanagement .el-dialog__body{overflow: auto;}
</style>
